<template>
  <div class="login">
    <header class="login-header">
      <div class="container">
        <h1 class="logo"><RouterLink to="/">小兔鲜</RouterLink></h1>
        <h3 class="sub">欢迎登录</h3>
        <RouterLink class="entry" to="/">
          进入网站首页 <span>>></span>
        </RouterLink>
      </div>
    </header>
    <div class="login-main">
      <div class="wrapper">
        <nav>
          <div
            :class="{ activeName: activeName === 'account' }"
            @click="activeName = 'account'"
          >
            账户登录
          </div>
          <div
            :class="{ activeName: activeName === 'qrcode' }"
            @click="activeName = 'qrcode'"
          >
            扫码登录
          </div>
        </nav>
        <div v-if="activeName === 'account'" class="account-box">
          <p class="toggle" v-if="!isMsgLogin">
            <a href="javascript:;" @click="setIsMsgLogin">
              <el-icon><User /></el-icon>
              使用账号登录
            </a>
          </p>
          <p class="toggle" v-if="isMsgLogin">
            <a href="javascript:;" @click="setIsMsgLogin">
              <el-icon><Message /></el-icon>
              使用短信登录
            </a>
          </p>

          <!-- Form表单 -->
          <el-form
            class="login-form"
            :model="formData"
            :rules="rules"
            ref="formRef"
          >
            <el-form-item
              class="login-form-item"
              v-if="!isMsgLogin"
              prop="account"
            >
              <el-icon><User /></el-icon>
              <el-input
                placeholder="请输入用户名"
                class="account"
                v-model="formData.account"
              />
            </el-form-item>
            <el-form-item
              class="login-form-item"
              v-if="!isMsgLogin"
              prop="password"
            >
              <el-icon><Lock /></el-icon>
              <el-input
                placeholder="请输入密码"
                class="password"
                v-model="formData.password"
              />
            </el-form-item>

            <el-form-item
              class="login-form-item"
              v-if="isMsgLogin"
              prop="phone"
            >
              <el-icon><User /></el-icon>
              <el-input
                placeholder="请输入手机号"
                class="phone"
                v-model="formData.phone"
              />
            </el-form-item>
            <el-form-item
              class="login-form-item"
              v-if="isMsgLogin"
              prop="validateCode"
            >
              <el-icon><Message /></el-icon>
              <el-input
                placeholder="请输入验证码"
                class="validate-code"
                v-model="formData.validateCode"
              />
              <el-button class="code-btn">发送验证码</el-button>
            </el-form-item>
            <el-form-item prop="isAgree">
              <el-checkbox class="isAgree" v-model="formData.isAgree"
                >我已同意 <a href="javascript:;">《隐私条款》</a>和
                <a href="javascript:;">《服务条款》</a>
              </el-checkbox>
            </el-form-item>

            <el-button
              type="primary"
              class="login-submit"
              @click="loginSubmit(formRef)"
              >登录</el-button
            >
          </el-form>

          <div class="action">
            <a href="javascript:;"
              ><img src="../../assets/images/login_qq.png" alt="qq授权登录"
            /></a>
            <div class="url">
              <a href="javascript:;">忘记密码</a>
              <a href="javascript:;">免费注册</a>
            </div>
          </div>
        </div>
        <!-- 二维码 -->
        <div v-if="activeName === 'qrcode'" class="qrcode-box">
          <img src="../../assets/images/qrcode.jpg" alt="登录二维码" />
          <p>打开 <a href="javascript:;">小兔鲜App</a> 扫码登录</p>
        </div>
      </div>
    </div>
    <LoginFooter />
  </div>
</template>

<script>
export default {
  name: 'SLogin'
}
</script>

<script setup>
import LoginFooter from '@/components/Footer-coperight.vue'
import { ref, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
// 使用vuex 登录&登出
const store = useStore()

// 切换显示（账户登录|扫码登录）
const activeName = ref('account')
// 切换显示（账号登录|手机短信登录）
const isMsgLogin = ref(false)
// 表单 ref
const formRef = ref()

// 监视 activeName
watch(activeName, (newVal) => {
  // 清空校验规则
  formRef.value?.clearValidate()
  // 清空表单
  formRef.value?.resetFields()
})

// 切换显示（账号登录|手机短信登录）方法
const setIsMsgLogin = () => {
  // 切换显示
  isMsgLogin.value = !isMsgLogin.value
  // 清空校验规则
  formRef.value.clearValidate()
  // 清空表单
  formRef.value.resetFields()
}

// 表单数据
const formData = reactive({
  account: 'xiaotuxian001',
  password: '123456',
  phone: '',
  validateCode: '',
  isAgree: true
})

// 自定义验证规则
const isAgreeRules = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请勾选登录协议'))
  } else {
    callback()
  }
}
const phoneRules = (rule, value, callback) => {
  if (value) {
    // 有值
    const reg = /^1[3|4|5|7|8|9][0-9]{9}$/
    if (reg.test(value)) {
      // 通过
      callback()
    } else {
      // 无效
      callback(new Error('请输入有效手机号码'))
    }
  } else {
    // 未输入
    callback(new Error('请输入手机号码'))
  }
}
// 验证规则
const rules = reactive({
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  phone: [{ validator: phoneRules, trigger: 'blur' }],
  validateCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 6, max: 6, message: '验证码长度6位', trigger: 'blur' }
  ],
  isAgree: [{ validator: isAgreeRules, trigger: 'change' }]
})

// 点击登录
const loginSubmit = (formRef) => {
  formRef.validate(async (valid) => {
    if (valid) {
      // 账号登录，发送请求并保存数据
      await store.dispatch('user/login', formData)
      ElMessage.success('登录成功')
      // 跳转到来登录页面之前的页面
      router.push(route.query.redirect || '/')
    } else {
      console.log('表单验证失败')
      return false
    }
  })
}
</script>

<style scoped lang="less">
.login {
  min-width: 1240px;
  margin: 0 auto;
}
.login-header {
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
  .container {
    width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .logo {
    width: 200px;
    a {
      display: block;
      height: 132px;
      width: 100%;
      text-indent: -9999px;
      background: url(../../assets/images/logo.png) no-repeat center 18px /
        contain;
    }
  }
  .sub {
    flex: 1;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 38px;
    margin-left: 20px;
    color: #666;
  }
  .entry {
    width: 125px;
    margin-bottom: 38px;
    font-size: 16px;
    color: #333;
    span {
      font-size: 14px;
      color: #27ba9b;
    }
  }
}

.login-main {
  background: url(../../assets/images/login-bg.png) no-repeat 50% / cover;
  height: 488px;
  position: relative;
  .wrapper {
    width: 380px;
    background: #fff;
    min-height: 400px;
    position: absolute;
    left: 50%;
    top: 54px;
    transform: translate3d(100px, 0, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    nav {
      height: 55px;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      padding: 0 40px;
      text-align: right;
      align-items: center;
      div {
        flex: 1;
        line-height: 1;
        display: inline-block;
        font-size: 18px;
        position: relative;
        color: #333;
        cursor: pointer;
        &:first-child {
          border-right: 1px solid #f5f5f5;
          text-align: left;
        }
        &.activeName {
          color: #27ba9b;
          font-weight: bold;
        }
      }
    }
  }
}
// 二维码容器
.qrcode-box {
  text-align: center;
  padding-top: 40px;
  p {
    margin-top: 20px;
    a {
      color: #27ba9b;
      font-size: 16px;
    }
  }
}
.toggle {
  padding: 15px 40px;
  // text-align: right;
  display: flex;
  justify-content: end;
  align-items: flex-end;
  a {
    display: flex;
    color: #27ba9b;
    font-size: 14px;
    svg {
      font-size: 16px;
      margin-top: 7px;
      margin-right: 3px;
    }
  }
}
/* form表单 */
.login-form {
  padding: 0 40px;
}
.isAgree {
  a {
    color: #006699;
  }
}
.login-submit {
  width: 100%;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  background: #27ba9b;
}

.action {
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  a {
    margin-left: 10px;
    font-size: 14px;
    color: #999;
  }
}
</style>

<style lang="less">
.login-form-item {
  position: relative;
  .el-icon {
    /* 图标大小 */
    position: absolute;
    left: 2px;
    z-index: 999;
    font-size: 28px;
    background-color: #cfcdcd;
    svg {
      /* 图标内容 */
      color: #fff;
      font-size: 20px;
    }
  }
  .code-btn {
    position: absolute;
    width: 100px;
    height: 28px;
    right: 2px;
  }
  .el-input__wrapper {
    padding-left: 36px;
  }
}

.isAgree.is-checked {
  .el-checkbox__label {
    color: #333;
  }
}
</style>
